<template>
    <div class="organization custom-commonBox">
        <div class="commonTitleBox"><span class="commonHeaderTitle">组织管理</span></div>

        <div class="search-content main-box" style="padding:10px;">
            <span class="ml20">组织名称：</span><el-input style="width:250px;" clearable v-model="name" placeholder="请输入组织名称"></el-input>
            <span class="ml20">状态：</span>
            <el-select v-model="status" clearable>
                <el-option label="全部" value=""></el-option>
                <el-option label="正常" value="正常"></el-option>
                <el-option label="停用" value="停用"></el-option>
            </el-select>
            <el-button class="ml10" type="primary" icon='el-icon-search' @click="queryData(false)">查询</el-button>
            <el-button style="margin-right:10px;" icon="el-icon-refresh-left" @click="restore">重置</el-button>
            <div style="margin-top:10px;">
                <el-button class="ml10" type="primary" icon='el-icon-add' @click="openAdd('add')">新增</el-button>
                <el-button style="margin-right:10px;" icon="el-icon-view" @click="expandAll">{{!expand?'展开':'收起'}}</el-button>
            </div>
        </div>

        <div class="table-wrapper" ref="tableWrapper">
            <el-table
                    ref="theTable"
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    :expand-row-keys="expandList"
                    :tree-props="{children: 'childs'}">
                <el-table-column
                        prop="name"
                        label="组织名称">
                </el-table-column>
                <el-table-column
                        prop="sort"
                        width="50"
                        label="排序">
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="50">
                    <template slot-scope="scope">
                        <div :style="{'color':scope.row.status == '正常'?'green':'red'}">{{scope.row.status}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        width="380"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="openAdd('edit',scope.row.id)"><i class="fa fa-pencil"></i>编辑</el-button>
                        <el-button type="text" size="mini" @click="openAdd('add',scope.row.id)"><i class="el-icon-add"></i>新增</el-button>
                        <el-button type="text" size="mini" @click="deleteProcess(scope.row.id)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <addOrganization :show.sync="showAdd" :type="type" :id="id" v-if="showAdd" @success="queryData"></addOrganization>
    </div>
</template>

<script>
    import addOrganization from "./dialog/addOrganization"
    import { mapGetters } from 'vuex'

    export default {
        data() {
            return {
                name:'',
                status:'',
                type:'',
                id:'',
                expandList:[],
                expand:false,
                showAdd:false,
                tableData: []
            }
        },
        components:{
            addOrganization
        },
        computed: {
            // 使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters([
                'projectInfo'
            ])
        },
        watch:{
            projectInfo(){
                this.queryData()
            }
        },
        mounted() {
          this.queryData(true)
        },
        methods:{
            restore() {
              this.name = ''
              this.status = ''
            },
            openAdd(type, id) {
              this.type = type
              this.id = id
              this.showAdd = true
            },
            expandAll() {
                this.expand = !this.expand
                const that = this
                getHasChildrenData(this.tableData)

                function getHasChildrenData(list) {
                    for (let i = 0; i < list.length; i++) {
                        if (list[i].childs && list[i].childs.length > 0) {
                            that.$refs.theTable.toggleRowExpansion(list[i], that.expand);
                            getHasChildrenData(list[i].childs)
                        }
                    }
                }
            },
            queryData(status) {
                this.$httpProj.get('/proj/Organization/getTree?name='+this.name+"&status="+this.status+"&noProjectId=true").then(res => {
                    this.tableData = res.data.list
                    if(status) {
                        setTimeout(() => {
                            this.expandAll()
                        },20)
                    }
                })
            },
            deleteProcess(id) {
                this.$confirm('此操作将永久删除该组织及其子组织, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$httpProj.delete('/proj/Organization/delete?id='+id + "&noProjectId=true").then(res =>{
                        this.$message({
                            type:'success',
                            message:'删除成功'
                        })
                        this.queryData()
                    })
                }).catch(() => {

                });
            }
        }
    }
</script>

<style scoped lang = 'scss'>
    .table-wrapper {
        height: calc(100vh - 120px);
    }
</style>